<template>
  <div class="button-box">
    <el-button
      size="small"
      :class="item.value === processingStatus ? 'active' : 'plain'"
      v-for="item in status"
      :key="item.value"
      @click="changeProcessingStatus(item)"
      >{{ item.label }}
    </el-button>
  </div>
</template>

<script>

export default {
  name: 'StatusBar',
  props: {
    status: {
      type: Array,
      default: []
    },
    showAll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      processingStatus: 'all',
    }
  },
  methods: {
    getProcessingStatusQuery(status) {
      return {
        processingStatus : status.value === 'all' ? undefined : status.value,
        statusCollect: status.value === 'all' ? undefined : [''],
      };
    },
    changeProcessingStatus(status) {
      this.processingStatus = status.value
      this.$emit('change', this.getProcessingStatusQuery(status))
    }
  }
};
export function mapToDict (arrMap) {
  return arrMap.map(([value, label]) => ({label,value}))
};
</script>

<style lang="scss" scoped>
.button-box{
  height: 48px;
}
.el-button {
  &.plain{
    background: #ffffff;
      border: 1px solid #3171ee;
      border-radius: 4px;
      color: #3171ee;
  }
  &.active{
    color: #fff;
    background-color: #3171ee;
  }
}
</style>